<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link href="/static/css/font.css?v={{data.version}}" rel="stylesheet">
  <link href="/static/css/weadmin.css?v={{data.version}}" rel="stylesheet">
  <script src="/static/lib/layui/layui.js?v={{data.version}}"></script>
  <link href="/static/webuploader/webuploader.css?v={{data.version}}" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="/static/webuploader/webuploader.min.js?v={{data.version}}"></script>
</head>

<body>



<div class="layui-card">
  <div class="layui-card-header">上传</div>
  <div class="layui-card-body">
    <button type="button" class="layui-btn" id="upload">
	  <i class="layui-icon">&#xe67c;</i>上传视频
	</button>

  </div>
</div>



<div class="layui-card">
  <div class="layui-card-header">超大文件上传</div>
  <div class="layui-card-body">
    <div id="uploader" class="wu-example">
      <div id="thelist" class="uploader-list"></div>
      <div class="btns">
          <div id="picker">选择文件</div>
          <!-- <button id="ctlBtn" class="btn btn-default">开始上传</button> -->
      </div>
      <div class="progress">         <!-- 进度条 -->
            <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;"></div>
      </div>

    </div>


<script type="text/javascript">
var task_id = WebUploader.Base.guid();        //产生task_id
var uploader = WebUploader.create({
    // swf文件路径
    swf:   '/static/webuploader/js/Uploader.swf',
    auto: true,                               //选择文件后，是否自动上传
    chunked: true,
    chunkSize: 5 * 1024 * 1024,
    duplicate: true, 

    // 文件接收服务端。
    server: '/video_api/uploadmd5',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false,
    formData: {                               //每次上传分片，一起携带的数据
        task_id: task_id,
    }
});

uploader.on('startUpload', function() {       //开始上传时，调用该方法
    $('.progress-bar').css('width', '0%');
    $('.progress-bar').text('0%');
});

uploader.on('uploadProgress', function(file, percentage) { //一个分片上传成功后，调用该方法
    $('.progress-bar').css('width', percentage * 100 - 1 + '%');
    $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%');
});

uploader.on('uploadSuccess', function(file) { //整个文件的所有分片都上传成功，调用该方法
    //上传的信息（文件唯一标识符，文件名）
    var data = {'task_id': task_id, 'filename': file.source['name'] };
    $.get('/video_api/uploadok', data);          //ajax携带data向该url发请求
    $('.progress-bar').css('width', '100%');
    $('.progress-bar').text('上传完成');
});

uploader.on('uploadError', function(file) {   //上传过程中发生异常，调用该方法
    $('.progress-bar').css('width', '100%');
    $('.progress-bar').text('上传失败');
});

uploader.on('uploadComplete', function(file) {//上传结束，无论文件最终是否上传成功，该方法都会被调用
    $('.progress-bar').removeClass('active progress-bar-striped');
});


</script>
  </div>
</div>

<script src="/static/lib/layui/layui.js"></script>
<script>
layui.use(['upload','jquery'], function(){
  var upload = layui.upload
  , $ = layui.jquery;
  
  //执行实例
  var uploadInst = upload.render({
    elem: '#upload' //绑定元素
    ,url: '/video_api/upload' //上传接口
    ,accept: 'file'
    ,done: function(res){
      	layer.msg(res.msg);
    }
    ,error: function(res){
    	layer.msg(res.msg);
    }
  });
});
</script>
</body>
</html>